<template>
	<div>
		<div class="form-container">
			<div>
				<el-button type="primary" icon="el-icon-plus" @click.native="addDialog">新增</el-button>
			</div>
			<common-form :form-label="searchLabel" :form="searchParams" :inline="searchInline" label-width="80px">
				<el-button type="primary" icon="el-icon-search" @click.native="searchInfo">查询</el-button>
			</common-form>
		</div>
		<el-table :data="tblData" size="small" border>
			<el-table-column v-for="(item, index) in tblLabel" 
				:prop="item.prop" :label="item.label" 
				:key="item.prop" align="center" 
				:width="index === 0 ? '50px' : 'auto'">
				<template slot-scope="scope">
					<el-button 
						v-if="item.prop === 'name'"
						@click.native.prevent="checkDialog(scope.row)"
						type="text"
						size="small">{{ scope.row.name }}</el-button>
					<span v-else>{{ scope.row[item.prop] }}</span>
				</template>
			</el-table-column>
			<el-table-column
				fixed="right"
				label="操作"
				width="120">
				<template slot-scope="scope">
					<el-button
						@click.native.prevent="editDialog(scope.row)"
						type="text"
						size="small">编辑</el-button>
					<el-button
						@click.native.prevent="delStr(scope.row)"
						type="text"
						size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			background
			hide-on-single-page
			layout="total, prev, pager, next"
			:total="totalCount" 
			@current-change="pageChange" 
			@prev-click="pageChange" 
			@next-click="pageChange">
		</el-pagination>
		<el-dialog 
			:title="dialogTitle" 
			:visible.sync="dialogVisible" 
			width="50%" @close="initDialog">
			<common-form :form-label="personLabel" :form="personParams" :inline="personInline" label-width="80px">
				<el-button @click.native="closeDialog">{{ dialogType != 'details' ? '取消' : '关闭' }}</el-button>
				<el-button v-if="dialogType != 'details'" type="primary" @click.native="makeSure">确定</el-button>
			</common-form>
		</el-dialog>
	</div>
</template>

<script>
import CommonForm from '../../components/CommonForm.vue';
import { getUserList, delUser } from '../../api/http';
export default {
	name: 'UserPage',
	components: {
		CommonForm
	},
	data() {
		return {
			searchLabel: [
				{
					type: 'input',
					label: '姓名',
					prop: 'name',
					placeholder: '请输入姓名'
				}
			],
			searchParams: {
				name: '',
				page: 1,
				limit: 10
			},
			searchInline: true,
			tblLabel: [
				{
					label: '序号',
					prop: 'num'
				},
				{
					label: '姓名',
					prop: 'name'
				},
				{
					label: '年龄',
					prop: 'age'
				},
				{
					label: '生日',
					prop: 'birth'
				},
				{
					label: '地址',
					prop: 'address'
				}
			],
			tblData: [],
			totalCount: 0,
			dialogType: 'add',
			dialogVisible: false,
			personLabel: [
				{
					type: 'input',
					label: '姓名',
					prop: 'name',
					placeholder: '请输入姓名'
				},
				{
					type: 'input',
					label: '年龄',
					prop: 'age',
					placeholder: '请输入年龄'
				},
				{
					type: 'date',
					label: '出生日期',
					prop: 'birth',
					placeholder: '请输入日期'
				},
				{
					type: 'input',
					label: '地址',
					prop: 'address',
					placeholder: '请输入地址'
				}
			],
			personParams: {
				id: '',
				name: '',
				age: '',
				birth: '',
				address: ''
			},
			personInline: false
		}
	},
	computed: {
		dialogTitle() {
			let title = '';
			switch (this.dialogType) {
				case 'add':
					title = '新增';
					break;
				case 'edit':
					title = '编辑';
					break;
				case 'details':
					title = '详情';
					break;
			}
			return title;
		}
	},
	methods: {
		searchInfo() {
			console.log(88);
			getUserList(this.searchParams).then(res => {
				this.tblData = res.data.list;
				this.totalCount = res.data.count;
			}).catch(err => {
				console.log(err);
			})
		},
		pageChange(curr) {
			this.searchParams.page = curr;
			this.searchInfo();
		},
		addDialog() {
			this.dialogType = 'add';
			this.dialogVisible = true;
		},
		checkDialog(tData) {
			this.dialogType = 'details';
			Object.keys(this.personParams).forEach(key => {
				this.personParams[key] = tData[key];
			})
			this.dialogVisible = true;
		},
		editDialog(tData) {
			this.dialogType = 'rdit';
			Object.keys(this.personParams).forEach(key => {
				this.personParams[key] = tData[key];
			})
			this.personParams.id = tData.id;
			this.dialogVisible = true;
		},
		delStr(tData) {
			this.personParams.id = tData.id;
			this.$confirm('确定要删除该行数据?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				delUser(this.personParams).then(res => {
					this.$message({
						message: res.data.msg,
						type: 'success'
					});
					this.searchInfo();
				}).catch(err => {
					console.log(err);
				})
			});
		},
		closeDialog() {
			this.dialogVisible = false;
		},
		initDialog() {
			Object.keys(this.personParams).forEach(key => {
				this.personParams[key] = '';
			})
		},
		makeSure() {
			let url = this.dialogType === 'add' ? '/user/add' : '/user/edit';
			this.$http.post(url, this.personParams).then(res => {
				this.dialogVisible = false;
				this.$message({
					message: res.data.msg,
					type: 'success'
				});
				this.searchInfo();
			});
		}
	}
}
</script>

<style lang="less" scoped>
	.form-container {
		display: flex;
		justify-content: space-between;
	}
	.el-button+.el-button {
		margin-left: 20px;
	}
	.anchor-btn {
		color: #A020F0
	}
	.anchor-btn:hover {
		color: #0000FF
	}
</style>